import { NgFor } from '@angular/common';
import { Component, DestroyRef, Input, OnInit } from '@angular/core';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { ActivatedRoute, NavigationEnd, Router, RouterLink } from '@angular/router'
import { takeUntil } from 'rxjs';

@Component({
  selector: 'lib-main-nav',
  standalone: true,
  imports: [
    NgFor,
    RouterLink

  ],
  styleUrl: './main-nav.component.scss',
  template: `
     <section class="nav t-flex !t-w-full">
    @for (item of navItems;  track item.path ||$index) {
      <a [routerLink]="item.data.url" 
         routerLinkActive="active " 
         [class.t-bg-gray-300]="curRouter === item.data.url"
      class='navItem '>{{item.title}}</a>
    }
  </section>
  `,
})
export class MainNavComponent implements OnInit {
  @Input() navItems: {
    path: string,
    title: string,
    data: {
      url: string
    }
    [key: string]: any;
    [key: symbol]: any;
  }[] = [];

  curRouter: string = ''

  constructor(
    private router: Router,
    private route: ActivatedRoute,
    private destroyRef: DestroyRef
  ) {
    this.router.events.
      pipe(
        takeUntilDestroyed(this.destroyRef)
      )
      .subscribe((event) => {
        if (event instanceof NavigationEnd) {
          console.log("🚀 ~ file: main-nav.component.ts:19 ~ MainNavComponent ~ this.router.events.subscribe ~ event:", event)
          this.curRouter = event.url.split('/')[1];
        }
      });
  }

  ngOnInit(): void {
    console.log("🚀 ~ file: main-nav.component.ts:20 ~ MainNavComponent ~ ngOnInit ~ this.navItems:", this.navItems)
  }


}
